<template>
  <div class="home-content">
    <l-notice-bar front-icon-name="notification"
                  l-class="content-notice"
                  type="roll" close="true"
                  show="true">
      欢迎进入征辩小程序
    </l-notice-bar>
    <div v-for="item of firstPageQuestions" :key="item.index">
    <l-card type="avatar" l-class="card" :image="item.avatarUrl" :title="item.nickname" :describe="item.date">
      <!--此处为content-->
      <view class="avatar-content-title" @click='clickEvent(item.questionId)'>
        {{item.title}}
      </view>
      <view class="avatar-content" @click='clickEvent(item.questionId)'>
        {{item.content}}
      </view>
      <view class="avter-share-container">
        <view class="like-container" >
          <l-icon name="like" size="28" @click='clickLike'/>
          <view class="number">{{item.likesNum}}喜欢</view>
        </view>

        <view class="like-container">
          <l-icon name="default" color="#666" size="28" />
          <view class="number">{{item.answersNum}}评论</view>
        </view>
      </view>
    </l-card>
      <div class="space"></div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HomeContent',
    data () {
      return {
        list: [],
        msg: {},
        firstPageQuestions: {},
        page: 1,
        rows: 5
      }
    },
    methods: {
      clickEvent (res) {
        console.log(res)
        var questionId = res
        wx.navigateTo({
          url: '/pages/selStandPoint?questionId=' + questionId
        })
      }
    },

    onLoad () {
      console.log(this.rows)
      let that = this
      wx.request({
        url: 'http://47.94.166.187:8080/miniProgram/selFirstPageQuestions',
        data: {
          token: wx.getStorageSync('token'),
          page: 1,
          rows: that.rows
        },
        success: res => {
          console.log(res.data.object)
          this.firstPageQuestions = res.data.object
        }
      })
    }
  }
</script>

<style lang="stylus">
  .home-content
    margin-top 20rpx
    .content-notice
      margin-bottom 16rpx
  /**********内容**********/
  .card
    border-radius .3rem !important
    .avatar-content-title
      font-size: 40rpx
      margin-bottom:10rpx
    .avter-share-container
      display: flex
      flex-direction: row
      justify-content: flex-end
      align-items: center
    .avatar-content
      display: -webkit-box
      word-break: break-all
      text-overflow: ellipsis
      font-size: 28rpx
      overflow: hidden
      -webkit-box-orient: vertical
      -webkit-line-clamp:2
      margin-bottom:20rpx
    .like-container
      display: flex
      margin-right: 18rpx
      .number
        font-size: 26rpx
        margin-left: 4rpx
  .space
    margin-top 20rpx
</style>
